<div class="main-content">
    <div class="main-content-wrap">
        <div class="left-panel">
            <nz-tree
                #objTreeComponent
                [nzData]="listData"
                nzCheckable
                [nzCheckedKeys]="defaultKeys"
                (nzCheckBoxChange)="selectedAreaChanged($event)">
            </nz-tree>
            <!--<ul nz-menu nzMode="inline" class="hr-statistics-left-menu">-->
                <!--<li nz-menu-item-->
                    <!--*ngFor="let item of listData; let idx = index"-->
                    <!--[nzSelected]="idx === 0"-->
                    <!--(click)="selectedAreaChanged(item.id)">-->
                    <!--{{item.item}}-->
                <!--</li>-->
            <!--</ul>-->
        </div>

        <div class="right-panel">
            <div class="right-top-box">

                <div class="right-content">
                    <nz-card [nzTitle]="'多站特征及统计值'"
                             class="row-card">
                        <nz-table
                            #dataTable
                            nzBordered
                            [nzData]="tableData"
                            nzSize="middle">
                            <thead>
                            <tr>
                                <th>名称</th>
                                <th>警戒水位</th>
                                <th>保证水位</th>
                                <th>最大值</th>
                                <th>最大值出现时间</th>
                                <th>最小值</th>
                                <th>最小值出现时间</th>
                                <th>平均值</th>
                                <th>中位值</th>
                                <th>前三年平均值</th>
                                <th>前三年中位值</th>
                                <th>与前三年平均值对比</th>
                                <th>与前三年中位值对比</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr *ngFor="let row of dataTable.data">
                                <td>{{ row.name }}</td>
                                <td>{{ row.alertWl }}</td>
                                <td>{{ row.limitWl }}</td>
                                <td>{{ row.maxWl }}</td>
                                <td>{{ row.maxTime }}</td>
                                <td>{{ row.minWl }}</td>
                                <td>{{ row.minTime }}</td>
                                <td>{{ row.avgWl }}</td>
                                <td>{{ row.medianWl }}</td>
                                <td>{{ row.last3AvgWl }}</td>
                                <td>{{ row.last3MedianWl }}</td>
                                <td>{{ row.last3AvgPer }}</td>
                                <td>{{ row.last3MedianPer }}</td>
                            </tr>
                            </tbody>
                        </nz-table>
                    </nz-card>
                    <nz-card [nzTitle]="'多站干渠引水流量'"
                             class="row-card">
                        <div
                            echarts
                            [options]="baseOpt"
                            [merge]="inletOptChange"
                            style="height: 291px;"
                        ></div>
                    </nz-card>
                    <nz-card [nzTitle]="'多站干渠引水流量表'"
                             class="row-card">
                        <nz-table
                            #inletTable
                            nzBordered
                            [nzData]="inletTableData"
                            nzSize="middle">
                            <thead>
                            <tr>
                                <th>名称</th>
                                <th *ngFor="let name of inletTableHead">{{ name }}</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr *ngFor="let row of inletTable.data">
                                <td>{{ row.date }}</td>
                                <td *ngFor="let name of inletTableHead">{{ row[name] }}</td>
                            </tr>
                            </tbody>
                        </nz-table>

                    </nz-card>
                </div>
            </div>
        </div>
    </div>

</div>

